<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遮罩层</title>
    <script src="../jquery-3.1.1.js"></script>
    <style>
        body{
            margin: 0;
            background-color: lightgrey;
        }
        .big{
            width: 390px;
            height: 580px;
            background-color: white;
            margin: 50px auto;
            position: relative;
        }
        .top{
            width: 370px;
            height: 400px;
            transition: all 0.5s;
            position: absolute;
            top: 10px;
            left: 10px;
            background-image: url('../img/1.png');
        }
        .p1{
            width: 350px;
            position: absolute;
            left: 20px;
            bottom: 20px;
        }
        .small{
            width: 390px;
            height: 215px;
            margin: -20px auto;
            background-color: white;
            position: relative;
        }
        .left{
            position: absolute;
            left: 18px;
            top: 15px;
        }
        .right{
            position: absolute;
            top: 15px;
            right: 20px;
        }
        .content{
            position: absolute;
            height: 186px;
            top: 0;
            color: white;
            background-color: gray;
            text-align: left;
            line-height: 30px;
            font-size: 14px;
            box-sizing: border-box;
            padding: 10px;
            opacity: .6;
            display: none;
        }
    </style>
</head>
<body>
    <!--<img src="鼠标放上去显示遮罩层.html.png" alt="">-->
    <div class="big">
        <div class="top"></div>
        <p class="p1">【金禧】 设计上运用了多片层叠设计，形成立体倒放的花苞视觉效果，创意独特。
        浓烈的印花明快的色彩勾勒出美妙的夏日异国情调，优质雪纺面料让小衫更显质感穿着凉爽透气，
        做工也相当考究。
    </p>
    </div>
    
    <div class="small">
        <div class="left">
            <img src="../img/2.png" alt="">
            <div class="content">souphy旗舰店<br><br>新款韩版性感红唇上衣圆领女短袖修身T恤</div>
        </div>
        <div class="right">
            <img src="../img/3.png" alt="">
            <div class="content">souphy旗舰店<br><br>新款韩版性感红唇上衣圆领女短袖修身T恤</div>
        </div>
    </div>
</body>
</html>
<script>
    $('.top').mouseover(function(){
        //经过显示边框 并且带有动画效果
        $('.top').css('box-shadow','0 0 1px 10px orange');
    });
    $('.top').mouseleave(function(){
        $('.top').css('box-shadow','none');
    });

    $('.left').hover(function(){
        $('.left .content').fadeIn(1000,'linear');
    },function(){
        $('.left .content').fadeOut(1000,'linear');
    });
    $('.right').hover(function(){
        $('.right .content').fadeIn(1000,'linear');
    },function(){
        $('.right .content').fadeOut(1000,'linear');
    });

</script>